<template>
    <div class="com-cnt">
        <div id="margin">
            <!--输入框-->
            <div class="ipt">
                <ul>
                    <li>
                        <input type="text" class="ipt_tel" placeholder="输入手机号码" id="phoneNo" >
                    </li>
                    <li>
                        <input id="yzm" type="text" placeholder="请输入验证码" class="ipt_code"><button id="smssend" style="float:right;color:#fff;display:inline-block;margin-top:10px;border:none;border-radius:5px;background:#aad112;font-size:12px">获取验证码</button>
                    </li>
                    <li>
                        <input id="newpwd" type="text" class="ipt_password" placeholder="输入新的登录密码">
                    </li>
                </ul>
            </div>
            <!--确认按钮-->
            <button id="resetbtn" class="btn">确认</button>
        </div>
    </div>
</template>
<script>
    import { domain } from '@/assets/js/config'
    import $ from 'jquery'
    export default {
        name: 'zhmmPage',
        components:{
        },
        data(){
            return{
            }
        },
        mounted () {
            var that = this
            var receiveMessage = 1
            //发送手机验证码
            $('#smssend').bind('click',function(){
                //获取手机号
                var phoneNo = $('#phoneNo').val().trim();
                if(!(/^1[34578]\d{9}$/.test(phoneNo))){
                    alert("手机号码有误，请重填");  
                    return false; 
                }else{
                    //发送验证码倒计时
                    var wait = 60;
                    function time() {
                        if (wait == 0) {
                            $('#smssend').attr("disabled", false);
                            $("#smssend").html("获取验证码");
                            wait = 60;
                        } else {
                            $('#smssend').attr("disabled", "disabled");
                            $("#smssend").html(wait + "秒重发");
                            wait--;
                            setTimeout(function () {
                                time()
                            },
                            1000)
                        }
                    }
                    time()
                    sendsms(phoneNo);
                }
            })

            //发送验证码
            function sendsms(phoneNo){
                console.log('send')
                $('.btn').css('background','#6495ed')
                $.ajax({
                    url : domain+"/xshk/f/message/getValidate",
                    data : {'mobile':phoneNo},  
                    type:"get",
                    dataType : "json",
                    xhrFields: {withCredentials: true},
                    crossDomain: true,
                    headers: {
                        'Content-Type':'application/x-www-form-urlencoded'
                    },
                    success : function(data) {
                        console.log(data)
                      if(data){
                            if(data.code===0){
                                receiveMessage= data.data;
                                zhmm();
                            }  
                      }else{
                            console.log("数据为空");
                      }
                    },
                    error : function(){
                        console.log("失败");
                    }
                    
                })
            }

            //找回密码
            function zhmm(){
                $('#resetbtn').bind('click',function(){
                    console.log('点确认')
                    var mobilephone = $('#phoneNo').val().trim()
                    var yzm = $('#yzm').val().trim()
                    var newpwd = $('#newpwd').val().trim()
                    if(isPassword(newpwd)){
                        if(yzm == receiveMessage){
                            $.ajax({
                                url : domain+"/xshk/f/home/resetInfo",
                                data : {'mobile':mobilephone,'password':newpwd},  
                                type:"get",
                                dataType : "json",
                                xhrFields: {withCredentials: true},
                                crossDomain: true,
                                headers: {
                                    'Content-Type':'application/x-www-form-urlencoded'
                                },
                                success : function(data) {
                                    console.log(data)
                                if(data){
                                        if(data.code===0){
                                            that.$router.push('/login')
                                        }else{
                                            alert(data.message)
                                        }
                                }else{
                                        console.log("数据为空");
                                }
                                },
                                error : function(){
                                    console.log("失败");
                                }
                                
                            })
                        }else{
                            alert('验证码不正确')
                        }
                    }else{
                        alert('请输入6到16位数字或字母的密码')
                    }
                })
            }
            
            //密码匹配
            function isPassword(psw){
                var regu = "^[0-9a-zA-Z]{6,12}$"; 
                var re = new RegExp(regu); 
                if (re.test(psw)) { 
                    return true; 
                }else{ 
                    return false; 
                }
            }

        },
        methods : {
        }
    }
</script>

<style lang="stylus" scoped>
.com-cnt
    width 100%
    height 100%
    
    #margin{
        padding: 0 5%;
        height:100%;
        width:100%;
        box-sizing: border-box;
        margin-top:50px;
    }
    /*输入框*/
    #margin .ipt{
        width:100%;
    }
    #margin .ipt ul{
        width:100%;
        float:left;
    }
    #margin .ipt ul li{
        float:left;
        border-bottom: 1px solid #e4e4e4;
        height:48px;
        width:100%;
    }
    #margin .ipt ul li input{
        width:58%;
        height:95%;
        border:none;
        float:left;
        padding-left:25px;
    }
    #margin .ipt ul li span{
        font-size:12px;
        color:#9f9f9f;
        float:right;
        line-height: 45px;
    }

    /*确认按钮*/
    .btn{
        width:100%;
        height:4.8%;
        background:#aad112;
        border-radius: 5px;
        outline:none;
        border:none;
        margin-top:30px;
        color:#fff;
    }
</style>